<template>
	<view>
		<view class="user-box">
			<view class="user-box-box">
				<view class="user-box_avatar">
					<uv-avatar :size="40" :src="userInfo.avatar" @click="tochangeinfo"></uv-avatar>
				</view>
				<view class="user-box_content">
					<view class="content" v-if="token"> 
						<uv-text :text="userInfo.isbusi=='1'?userInfo.realname:userInfo.name" bold color="#572b10" ></uv-text>
						<view class="margin-top-xs">
							<block v-if="userInfo.vipnames">
								<text class="vipnames">{{userInfo.vipnames}}</text>
							</block>
							<uv-text v-else text="您还未成为VIP会员" color="#966140" margin="5px 0 0 0"></uv-text>
						</view>
					</view>
					<view class="content" v-else>
						<uv-text text="登录/注册" color="#572b10" bold @click="handleLogin"></uv-text>
						<uv-text text="您还未登录" color="#966140" margin="5px 0 0 0" :size="12"></uv-text>
					</view>
				</view>
			</view>
			
		</view>

		<view class="pkgs-box">
			<view class="margin-bottom-sm">
				<uv-tabs :list="pkglist" lineColor='#7d5122'></uv-tabs>
			</view>
			
			<uv-scroll-list indicatorActiveColor='#7d5122'>
				<view class="pkgs-content">
					<view v-for="pkg in selectPkgs" :key="pkg.id"
						:class="['pkgsitem',pkg.id==selectpkg.id?'pkgselect':'noselect']" @click="changepkg(pkg)">
						<view v-if="pkg.remark" class="pkg-bage">
							<text>{{pkg.remark}}</text>
						</view>
						<view class="pkg-months">
							<uv-text :text="`${pkg.months}个月`" :size="20" bold align="center"></uv-text>
						</view>
						<view class="price">
							<text class="icon">￥</text><text class="text">{{pkg.money}}</text>
							<uv-text></uv-text>
						</view>
						<uv-text type="info" :size="12" align="center" text="仅需96.5元/月"></uv-text>
					</view>
				</view>

			</uv-scroll-list>
			<view class="pkg-detail">
				{{selectpkg.title}}
			</view>
		</view>

		<view class="uv-card">

			<uv-text bold :size="18" text="恭喜开通VIP,尊享特权" margin="10px 0 10px 0"></uv-text>

		</view>
		<view class="uv-card">

			<uv-text bold :size="18" text="会员权益" margin="0 0 10px 0"></uv-text>
			<uv-grid :col="3">
				<uv-grid-item>
					<view class="pkg-equity-item">
						<image src="../../static/vipicon01.png" mode="widthFix"></image>
						<uv-text text="朋友圈同步" color="#7B4800" :size="14" bold align="center"></uv-text>
						<uv-text type="info" :lines="2" text="每天自动同步朋友圈    " :size="12" margin="5px 0 0 0" :customStyle="{height:'32px'}"></uv-text>
					</view>
				</uv-grid-item>
				<uv-grid-item>
					<view class="pkg-equity-item">
						<image src="../../static/vipicon02.png" mode="widthFix"></image>
						<uv-text text="开启零售" color="#7B4800" :size="14" bold align="center"></uv-text>
						<uv-text type="info" :lines="2"  text="实时推广到上百汽车网" :size="12" margin="5px 0 0 0"></uv-text>
					</view>
				</uv-grid-item>
				<uv-grid-item>
					<view class="pkg-equity-item">
						<image src="../../static/vipicon03.png" mode="widthFix"></image>
						<uv-text text="加人脉" color="#7B4800" :size="14" bold align="center"></uv-text>
						<uv-text type="info" :lines="2"  text="人脉迅速翻倍,拓宽人脉圈" :size="12" margin="5px 0 0 0"></uv-text>
					</view>
				</uv-grid-item>
				<uv-grid-item>
					<view class="pkg-equity-item">
						<image src="../../static/vipicon04.png" mode="widthFix"></image>
						<uv-text text="加车商群" color="#7B4800" :size="14" bold align="center"></uv-text>
						<uv-text type="info" :lines="2"  text="可进全国/本地/新能源优质群" :size="12" margin="5px 0 0 0"></uv-text>
					</view>
				</uv-grid-item>
				<uv-grid-item>
					<view class="pkg-equity-item">
						<image src="../../static/vipicon05.png" mode="widthFix"></image>
						<uv-text text="个人卖车线索" color="#7B4800" :size="14" bold align="center"></uv-text>
						<uv-text type="info" :lines="2"  text="急速联系,与车主直接电话联系" :size="12" margin="5px 0 0 0"></uv-text>
					</view>
				</uv-grid-item>
				<uv-grid-item>
					<view class="pkg-equity-item">
						<image src="../../static/vipicon06.png" mode="widthFix"></image>
						<uv-text text="线索锁定看车" color="#7B4800" :size="14" bold align="center"></uv-text>
						<uv-text type="info"  :lines="2" text="线索独享,不支持其他人看车" :size="12" margin="5px 0 0 0"></uv-text>
					</view>
				</uv-grid-item>
				<uv-grid-item>
					<view class="pkg-equity-item">
						<image src="../../static/vipicon07.png" mode="widthFix"></image>
						<uv-text text="发布车源" color="#7B4800" :size="14" bold align="center"></uv-text>
						<uv-text type="info" :lines="2"  text="发车不限量,微信只能推送" :size="12" margin="5px 0 0 0"></uv-text>
					</view>
				</uv-grid-item>
				<uv-grid-item>
					<view class="pkg-equity-item">
						<image src="../../static/vipicon08.png" mode="widthFix"></image>
						<uv-text text="车源刷新" color="#7B4800" :size="14" bold align="center"></uv-text>
						<uv-text type="info" :lines="2"  text="不限量,支持多车源一键刷新" :size="12" margin="5px 0 0 0"></uv-text>
					</view>
				</uv-grid-item>
				<uv-grid-item>
					<view class="pkg-equity-item">
						<image src="../../static/vipicon09.png" mode="widthFix"></image>
						<uv-text text="打电话/加微信" color="#7B4800" :size="14" bold align="center"></uv-text>
						<uv-text type="info"  :lines="2" text="突破每日获取电话/微信上限" :size="12" margin="5px 0 0 0"></uv-text>
					</view>
				</uv-grid-item>
				<uv-grid-item>
					<view class="pkg-equity-item">
						<image src="../../static/vipicon10.png" mode="widthFix"></image>
						<uv-text text="车源优先排序" color="#7B4800" :size="14" bold align="center"></uv-text>
						<uv-text type="info" :lines="2"  text="主页/搜索优先于非会员排序" :size="12" margin="5px 0 0 0"></uv-text>
					</view>
				</uv-grid-item>
				<uv-grid-item>
					<view class="pkg-equity-item">
						<image src="../../static/vipicon11.png" mode="widthFix"></image>
						<uv-text text="查看访客详情" color="#7B4800" :size="14" bold align="center"></uv-text>
						<uv-text type="info" :lines="2"  text="可查看近一个月留号访客明细" :size="12" margin="5px 0 0 0"></uv-text>
					</view>
				</uv-grid-item>
				<uv-grid-item>
					<view class="pkg-equity-item">
						<image src="../../static/vipicon12.png" mode="widthFix"></image>
						<uv-text text="尊贵身份" color="#7B4800" :size="14" bold align="center"></uv-text>
						<uv-text type="info" :lines="2"  text="VIP专属标识,彰显尊贵身份" :size="12" margin="5px 0 0 0"></uv-text>
					</view>
				</uv-grid-item>
			</uv-grid>

		</view>
		<view class="uv-card">
			<view class="uv-card_header">
				<view class="uv-card_header_title">
					
					<uv-text bold :size="18" text="帮助中心" margin="10 0 10 0"></uv-text>
				</view>
				<view class="uv-card_header_extra">
					<uv-button icon="server-man" open-type="contact" type="info" text="咨询客服"  :customStyle="btncust"> </uv-button>
					 
				</view>
			</view>
			<view class="uv-card_body">
				<uv-text text="1.多次充值VIP,有效期如何计算？" color="#7B4800"></uv-text>
				<uv-text text="如果您多次充值VIP,有效期将在原来的到期时间上延续对应购买时长" type="info" :size="13" margin="5px 0 10px 0"></uv-text>
				<uv-text text="2.会员充值后是否支持退款" color="#7B4800"></uv-text>
				<uv-text text="如果您成功充值会员后,平台即可为您提供相应会员权益,故会员费用将不予退还" type="info" :size="13" margin="5px 0 10px 0"></uv-text>
				<uv-text text="3.会员到期" color="#7B4800"></uv-text>
				<uv-text text="VIP到期后不继续续费,如朋友圈车源同步等相应的会员权益将被收回无法使用,其他基础功能不受影响" type="info" :size="13" margin="5px 0 10px 0"></uv-text>

			</view>
		</view>
		<view style="height: 200upx;"></view>

		<view class="vippkg-bottom">
			<view class="left">
				<uv-text text="开通前请阅读" type="info" :size="13" align="center"></uv-text>
				<uv-text text="《会员服务协议》" color="#cba176" :size="13" align="center" @click="toslince"></uv-text>
			</view>
			<view class="right">
				<uv-button color="linear-gradient(to right,#f5e8cc,#edd7a3)" size="large" shape="circle"
					:customTextStyle="{FontSize:'16px',FontWeight:'bold',Color:'#7d5122'}"
					:text="`￥${selectpkg.money}确认协议并支付`" @click="handleBuy"></uv-button>
			</view>
		</view>
	</view>
</template>

<script>
	import { getVipBuy, buyVip } from '@/utils/http.js'
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				pkglist: {},
				selectPkgs: [],
				selectpkg: {},
				wxcode: '',
				btncust: {
					padding: '0 5px', 
					border: 'none'
				},
			};
		},
		onLoad() {
			uni.setNavigationBarColor({
				backgroundColor: '#393837',
				frontColor: '#ffffff'
			})
			this.fetchVipPkg()
			let that = this
			uni.login({
				success(res) {
					const { code } = res
					that.wxcode = code
				}
			})
		},
		computed: {
			...mapState({
				token: state => state.user.token,
				userInfo: state => state.user.userInfo
			}),

		},
		methods: {
			async handleBuy() {
				var parm = { code: this.wxcode, vipid: this.selectpkg.id }
				const { data, code } = await buyVip(parm)

				const { appId, nonceStr, packageVal, paySign, signType, timestamp } = data

				let that = this
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: String(timestamp),
					nonceStr: nonceStr,
					package: packageVal,
					signType: signType,
					paySign: paySign,
					success: function(res) {
						uni.showToast({
							title: '支付成功',
						})
						that.$store.dispatch('user/reloadUser')
						that.$store.dispatch('user/reloaduserGroup')
					},
					fail: function(err) {
						uni.showToast({
							title: '支付失败',
							icon: 'fail'
						})
					}
				})
			},
			toslince() {
				uni.navigateTo({
					url: '/pages/mine/pyq'
				})
			},
			changepkg(pkg) {
				this.selectpkg = pkg
			},
			fetchVipPkg() {
				getVipBuy().then(res => {
					const { data } = res
					let map = {}
					for (let i = 0; i < data.length; i++) {
						let _item = data[i]
						if (map[_item.name]) {
							map[_item.name].push(_item)
						} else {
							map[_item.name] = [_item]
						}
					}
					let source = []
					Object.keys(map).forEach(key => {
						source.push({
							name: key,
							data: map[key]
						})
					})
					this.pkglist = source
					this.selectPkgs = source[0].data
					this.selectpkg = source[0].data[0]

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background: #fff;
	}
	.uv-card{
		margin: 20upx 0 0 0;
	}
	.user-box {
		background:url("../../static/vipPkg01.png") no-repeat #fff;
		background-size: cover;
		height: 234upx;
		&_content {
			flex: 1;
			padding: 0px 20upx;
		}
	}
	.user-box-box{
		display: flex;
		justify-content: center;
		padding: 76upx 0 0 54upx;
	}

	.pkgs-box {
		background-color: #fff;
		padding: 0 10px;

		.pkgs-content {
			display: flex;
			flex-direction: row;
		}

		.pkg-detail {
			color: #888;
			line-height: 42upx;
			padding:10upx 0 20upx 0;
		}

		

		.noselect {

			background-color: #fff;
		}
		
		.pkgsitem {
			width: 230upx;
			padding: 40upx 20upx;
			margin: 0 20upx;
			text-align: center;
			position: relative;
			border-radius: 20upx;
			border: 2upx solid #dbdbdb;

			.pkg-bage {
				position: absolute;
				top: -2upx;
				left: -2upx;
				color: #fff7ca;
				background: linear-gradient(to right, #393838, #4a4848);
				font-size: 24upx;
				padding: 6upx 30upx;
				border-radius: 16upx 0 16upx 0;
				text-align: center;
			}
			.pkg-months{
				margin-top: 30upx;
			}
			.price {
				text-align: center;
				color: #7d5122;
				margin: 20upx auto;

				.icon {
					font-size:28upx;
				}

				.text {
					font-size: 60upx;
					font-weight: bold;
				}
			}
		}

	}
	.pkgselect {
		background: linear-gradient(to top, #fdf7ec, #fdf7ec);
		border: 6upx solid #deb472 !important; 
	}
	.pkgselect .pkg-bage{
		top: -6upx !important;
		left: -6upx !important;
	}
	.pkgselect .pkg-months{
		color: #7d5122;
	}
	.vippkg-bottom {
		display: flex;
		position: fixed;
		width: 750upx;
		height: 160upx;
		background-color: #fff;
		bottom: 0;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		.left {
			width: 250upx;
			text-align: center;
		}

		.right {
			width: 500upx;
			padding: 10upx 30upx;
		}

	}
	.pkg-equity-item image{
		width: 80upx;
		display: block;
		margin: 0 auto 10upx auto;
	}
	.pkg-equity-item {
		padding: 15upx;
		margin-top: 10upx;
	}
	.vipnames{
		background: #ab6d05;
		color: #f8d589;
		border-radius: 20upx;
		padding: 6upx 16upx;
		font-size: 24upx;
	}
</style>